import Module from "@/views/dashboard/agriculture/module";
import VideoPanel from "@/components/VideoPanel";
import { Navigation, Pagination, Swiper } from "swiper";
// import Swiper and modules styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "./index.scss";
import box_bg_active from "./assets/21164.svg";
import box_bg_unactive from "./assets/21165.svg";

export default defineComponent({
	name: "VideoSurveillance",
	setup() {
		const swiperDom = ref();
		onMounted(() => {
			nextTick(() => {
				new Swiper(swiperDom.value, {
					direction: "horizontal", // 垂直切换选项

					modules: [Navigation, Pagination],

					// 如果需要前进后退按钮
					navigation: {
						nextEl: ".swiper-button-next",
						prevEl: ".swiper-button-prev"
					},
					freeMode: true,
					scrollbar: {
						el: ".swiper-scrollbar"
					},
					slidesPerView: 3,
					spaceBetween: 20
				});
			});
		});

		return () => (
			<Module title={"视频监控"}>
				<div className={"flex flex-col box-border h-full w-full"}>
					<div className={"h-[28px] flex flex-row "}>
						<div className={"h-full mx-1 relative"}>
							<img src={box_bg_active} alt={""} className={"h-full"} />

							<div className={"w-fit h-fit absolute top-0 bottom-0 left-0 right-0 m-auto"}>监控</div>
						</div>
						<div className={"h-full mx-1 relative"}>
							<img src={box_bg_unactive} alt={""} className={"h-full"} />
							<div className={"w-fit h-fit absolute top-0 bottom-0 left-0 right-0 m-auto"}>周边</div>
						</div>
						<div className={"h-full mx-1 relative"}>
							<img src={box_bg_unactive} alt={""} className={"h-full"} />
							<div className={"w-fit h-fit absolute top-0 bottom-0 left-0 right-0 m-auto"}>生产</div>
						</div>
					</div>

					<div className={" p-5 pb-8 "}>
						<VideoPanel
							className={"w-full h-full"}
							videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv"
						/>
					</div>
					<div className={"swiper-father h-fit w-full relative mx-auto z-50"}>
						<div ref={swiperDom} className={"w-[80%] h-fit my-auto swiper"}>
							<div className="swiper-wrapper">
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
								<div className="swiper-slide">
									<VideoPanel videoUrl="http://46.122.45.17:35063/live/34020000002370000001-34020000002370000001-1.flv" />
								</div>
							</div>
						</div>
						<div className="swiper-button-prev "></div>
						<div className="swiper-button-next "></div>
					</div>
				</div>
			</Module>
		);
	}
});
